<template>
      <div id="app" ref="app">

            <el-col :span="24" class="top">
                  <el-col :span="7" class="perchbox"></el-col>
                  <el-col :span="10">
                        <el-input placeholder="请输入搜索内容" v-model="searchValue" class="input-with-select" @keyup.enter.native="onsSearch">
                        <el-select v-model="engine" slot="prepend" placeholder="请选择">
                              <el-option v-for="item in searchEngine" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click.native="onsSearch"></el-button>
                        </el-input>
                  </el-col>
                  <el-col :span="7" class="perchbox"></el-col>
            </el-col>


            <el-col :span="24" class="bottom">

                  
                  <el-col :span="24" class="sites-box" ref="sitesBox" :class="showSites?'sites-begin':'sites-end'">
                        <!-- 站点收录 -->
                        <el-col :span="24" class="icon-box">
                              <i class="bottom-button" @click="showSites=!showSites" :class="showSites?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
                        </el-col>

                        <el-col :span="24" v-for="(item1,index1) in menuList" :key="index1">
                              <el-col :span="1" class="className">
                                    {{item1.name}}
                                    <i @click="editClassName(index1)" class="el-icon-edit showEditClass"></i>
                              </el-col>
                              <el-col :span="23">
                                    <el-col :span="24">
                                          <el-col :xs="6" :md="2" class="contact-item" v-for="(item2,index2) in item1.sites" :key="index2">
                                                <i class="el-icon-close" @click="removeSite(index1,index2)"></i>
                                                <a :href="item2.link">
                                                      <div class="contact-icon">
                                                            <img :src="item2.link+'/favicon.ico'" class="contact-img " onerror="this.src='https://tworice.cn/erfan.png'"/>
                                                      </div>
                                                </a>
                                                <p>{{item2.name}}</p>
                                          </el-col>
                                          <el-col :xs="6" :md="2" class="contact-item" v-if="item1.sites.length<12">
                                                <div class="contact-icon" @click="addSite(index1)">
                                                      <img src="add.png" class="contact-img " />
                                                </div>
                                                <p>添加</p>
                                          </el-col>
                                    </el-col>
                              </el-col>
                        </el-col>
                  </el-col>
            </el-col>





            <!-- 设置图标 -->
            <i class="el-icon-setting" @click="setting = true"></i>
            <el-drawer title="设置" :visible.sync="setting" direction="rtl" :before-close="settingClose">
                  <!-- ==================外观====================== -->
                  <el-col :span="24"><h4 class="setting-title">外观</h4></el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">主题颜色</el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-color-picker v-model="themeColor" @change="setThemeColor"></el-color-picker>
                        </el-col>
                  </el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">字体颜色</el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-color-picker v-model="fontColor" @change="setFontColor"></el-color-picker>
                        </el-col>
                  </el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              <el-tooltip class="item" effect="dark" content="输入图片网址，回车保存" placement="top-start">
                                    <i class="el-icon-question"></i>
                              </el-tooltip>
                              背景图片
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-input placeholder="请输入图片链接" v-model="bgImg" clearable size="mini" class="bg-input" @keyup.enter.native="saveBgImg"></el-input>
                        </el-col>
                  </el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              <el-tooltip class="item" effect="dark" content="是否默认显示" placement="top-start">
                                    <i class="el-icon-question"></i>
                              </el-tooltip>
                              下功能栏
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-switch @change="changeShowSites()" v-model="isShowSites" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                        </el-col>
                  </el-col>
                  <!-- =========================搜索==================== -->
                  <el-col :span="24"><h4 class="setting-title">搜索</h4></el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              <el-tooltip class="item" effect="dark" content="如需添加搜索引擎请在博客中留言告知" placement="top-start">
                                    <i class="el-icon-question"></i>
                              </el-tooltip>
                              首选搜索引擎
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-select v-model="engine" placeholder="请选择" @change="setSearchEngine">
                                    <el-option v-for="item in searchEngine" :key="item.value" :label="item.label" :value="item.value"></el-option>
                              </el-select>
                        </el-col>
                  </el-col>

                  <!-- =========================其他==================== -->
                  <el-col :span="24"><h4 class="setting-title">其他</h4></el-col>
                  
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              恢复
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-button type="warning" plain @click.native="resetSetting">恢复默认</el-button>
                        </el-col>
                  </el-col>

                  <!-- =========================关于==================== -->
                  <el-col :span="24"><h4 class="setting-title">关于</h4></el-col>
                  
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              二饭的博客
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-link type="primary" href="https://tworice.cn" :underline="false">二饭的博客</el-link>
                        </el-col>
                  </el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              作者
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-link type="primary" href="https://tworice.cn" :underline="false">二饭</el-link>
                        </el-col>
                  </el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              版本
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              v1.0
                        </el-col>
                  </el-col>
            </el-drawer>
            <!-- 添加站点 -->
            <el-dialog title="添加站点" :visible.sync="sitesVisible" width="30%">
                  <el-form :model="siteForm.form">
                        <el-form-item label="站点名称" label-width="120px">
                              <el-input v-model="siteForm.name" autocomplete="off" size="mini" class="add-site-input"></el-input>
                        </el-form-item>
                        <el-form-item label="站点链接" label-width="120px">
                              <el-input v-model="siteForm.url" autocomplete="off" size="mini" class="add-site-input"></el-input>
                              <el-tooltip class="item" effect="dark" content="只写域名，域名后内容不需要写" placement="top-start">
                                    <i class="el-icon-question"></i>
                              </el-tooltip>
                        </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="sitesVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitSite">确 定</el-button>
                  </div>
            </el-dialog>
      </div>
      
</template>


















<script>

export default {
      name: 'App',
      data() {
            return {
                  h:'aaaaaa',
                  engine:'1',
                  searchValue:'',
                  href:['https://www.baidu.com/s?wd=','https://cn.bing.com/search?q=','https://kaifa.baidu.com/searchPage?wd=','https://so.csdn.net/so/search?q='],
                  setting:false,// 是否显示设置
                  showSites:false,// 是否显示下方功能栏
                  themeColor:'#00D98F',// 主题颜色
                  fontColor:'#FFFFFF',
                  searchEngine:[
                        {
                              value:'1',
                              label:'百度'
                        },
                        {
                              value:'2',
                              label:'必应'
                        },
                        {
                              value:'3',
                              label:'开发者搜索'
                        },
                        {
                              value:'4',
                              label:'CSDN搜索'
                        },
                  ],
                  menuList:[
                        {
                              name:'开发',
                              sites:[
                                    {
                                          name:'爱资料在线工具',
                                          link:'https://www.toolnb.com/'
                                    }
                              ]
                        },
                        {
                              name:'生活',
                              sites:[
                                    {
                                          name:'二饭的博客',
                                          link:'https://www.tworice.cn/'
                                    }
                              ]
                        },
                        {
                              name:'其他',
                              sites:[
                                    {
                                          name:'系统下载平台',
                                          link:'https://www.sysmini.com/'
                                    }
                              ]
                        },
                  ],
                  bgImg:'',// 背景图片地址
                  isShowSites:true,// 是否默认打开功能栏
                  addSiteIndex:0,// 添加站点的分类
                  sitesVisible: false,// 是否显示添加站点对话框
                  siteForm: {   // 添加站点表单
                        name: '',
                        url: '',
                  }
            }
      },
      methods: {
            initSetting(){
                  let themeColor=window.localStorage.getItem('--themeColor')||'#00D98F';
                  let fontColor=window.localStorage.getItem('--fontColor')||'#FFFFFF';
                  let firstSearchEngine=window.localStorage.getItem('firstSearchEngine')||'1';
                  let bgImg=window.localStorage.getItem('bgImg')||'';
                  // let bg=window.localStorage.getItem("bg");

                  document.documentElement.style.setProperty('--themeColor',themeColor);
                  document.documentElement.style.setProperty('--fontColor',fontColor);
                  this.engine=firstSearchEngine;
                  // 背景图片
                  this.bgImg=bgImg;
                  this.$refs.app.style.backgroundImage = 'url(' + bgImg + ')';

                  // 初始化下功能栏
                  let isShowSites=window.localStorage.getItem('isShowSites')||'true';
                  isShowSites=JSON.parse(isShowSites);
                  this.showSites=this.isShowSites=isShowSites;
                  let menuList=window.localStorage.getItem('menuList')||'';
                  if(menuList==''){
                        let menuListString=JSON.stringify(this.menuList);
                        window.localStorage.setItem('menuList',menuListString);
                  }else{
                        menuList=JSON.parse(menuList);
                        this.menuList=menuList;
                  }
            },
            onsSearch(){
                  let link=this.href[parseInt(this.engine)-1]+this.searchValue;
                  window.location.href=link;
            },
            // 关闭设置
            settingClose(done){
                  done();     
            },

            /**恢复默认设置 */
            resetSetting(){
                  window.localStorage.clear();
                  this.initSetting();
            },
            // 设置主题颜色
            setThemeColor(){
                  window.localStorage.setItem("--themeColor",this.themeColor);
                  this.initSetting();
            },
            // 设置字体颜色
            setFontColor(){
                  window.localStorage.setItem("--fontColor",this.fontColor);
                  this.initSetting();
            },
            // 设置首选搜索引擎
            setSearchEngine(e){
                  window.localStorage.setItem("firstSearchEngine",e);
            },
            // 图片背景
            saveBgImg(){
                  this.$refs.app.style.backgroundImage = 'url(' + this.bgImg + ')';
                  window.localStorage.setItem("bgImg",this.bgImg);
                  this.$message({
                        type:'success',
                        message:'背景设置成功'
                  })
            },
            // 是否显示站点框
            handleShowSites(){

            },
            // 改变是否默认显示功能栏
            changeShowSites(e){
                  this.isShowSites=e;
                  window.localStorage.setItem("isShowSites",this.isShowSites);
            },
            // 编辑分类名称
            editClassName(index){
                  // const that=this;
                  this.$prompt('请输入新的分类名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                  }).then(({ value }) => {
                        let menuList=window.localStorage.getItem('menuList');
                        menuList=JSON.parse(menuList);
                        menuList[index].name=value;
                        this.menuList=menuList;
                        window.localStorage.setItem('menuList',JSON.stringify(menuList));

                        this.$message({
                              type: 'success',
                              message: '修改成功'
                        });
                  }).catch(() => {
                        this.$message({
                              type: 'info',
                              message: '取消输入'
                        });       
                  });
            },
            // 添加站点
            addSite(index){
                  this.addSiteIndex=index;
                  this.sitesVisible = true
            },
            // 提交
            submitSite(){
                  if(this.siteForm.name==''||this.siteForm.url==''){
                        return;
                  }
                  let site={
                        name:this.siteForm.name,
                        link:this.siteForm.url
                  }
                  this.menuList[this.addSiteIndex].sites.push(site);
                  this.sitesVisible=false;
                  this.siteForm.name='';this.siteForm.url='';
                  
                  
                  this.saveMenu();
                  
            },
            // 删除站点
            removeSite(index1,index2){
                  console.log(index1,index2);
                  
                  this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                  }).then(() => {
                        this.menuList[index1].sites.splice(index2,1);
                        this.saveMenu();
                        this.$message({
                              type: 'success',
                              message: '删除成功!'
                        });
                  }).catch(() => {
                        this.$message({
                              type: 'info',
                              message: '已取消删除'
                        });
                  });
            },
            // 持久保存menu
            saveMenu(){
                  window.localStorage.setItem('menuList',JSON.stringify(this.menuList));
            }
      },
      mounted() {
            this.initSetting()
      },
}
</script>


























<style lang="less">
      *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            /* 去除手机端按下的色块 */
            -webkit-tap-highlight-color:transparent;
      }
      :root{
            --themeColor:#00D98F;
            --fontColor:#FFFFFF;
      }
      #app{
            position: relative;
            height: 100vh;
            background: no-repeat center center;
            background-size: 100% 100%;
            background-color: #E9F0F0;
            overflow: hidden;
            user-select: none;
            .el-icon-setting{
                  position:absolute;
                  top: 5vh;
                  right: 5vh;
                  font-size: 25px;
            }
      }

      img {
            /* 禁止长按保存图片 */
            pointer-events:none;
            -webkit-user-select:none;
            -moz-user-select:none;
            user-select:none;
      }
      /* 占位盒子 */
      .perchbox{
            min-height: 1vh;
      }
      /* a链接无下划线 */
      a{
            text-decoration: none;
      }
      .el-icon-setting:hover{
            cursor:pointer;
      }
      .top{
            height: 25vh;
            padding-top: 21vh;
            .el-select{
                  background-color: var(--themeColor);
                  color: var(--fontColor);
                  .el-input {
                        width: 130px;
                  } 
                  .el-input .el-select__caret{
                        color: var(--fontColor);
                  }
            }
            .el-input-group__append{
                  background-color: var(--themeColor);
                  color: var(--fontColor);
            }
      }
      .bottom{
            height: 75vh;
            // display: flex;
            // align-items: center;
            // justify-content: space-around;
            // flex-wrap: wrap;
      }

      /**设置标题 */
      .setting-title{
            text-align: left;
            padding:30px 0 0 50px;
            color: var(--themeColor);
            letter-spacing: 10px;
      }
      /**设置左边 */
      .setting-item-left{
            line-height: 60px;
            text-align: right;
            padding-right: 10px;
            font-size: 0.8rem;
            font-weight: 700;
      }
      .setting-item-right{
            line-height: 60px;
            text-align: left;
            padding-left: 10px;
            display: flex;
            align-items: center;
            height: 60px;
      }
      .contact-item {
            display: flex;
            justify-content: space-around;
            align-items: center;
            /* 让元素垂直排列 这里就是让包含图片的div和文字垂直排列 */
            flex-direction: column;
            height: 120px;

            padding: 10px 20px;
            position: relative;

            // 删除图标
            i{
                  position: absolute;
                  top: 5px;
                  right: 15px;
                  padding: 2px;
                  border-radius: 50%;
                  background-color: red;
                  color: white;
                  display: none;
                  cursor: pointer;

                  z-index: 9999;
            }
      }
      .contact-item:hover i{
            display: inline;
      }
      .contact-item p{
            // 站点名称
            font-size: 8px;
            color: slategrey;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:1;  /* 设置行数 */
            -webkit-box-orient: vertical;
            text-align: center;
      }
      .contact-icon {
            /* 鼠标放上去变成小手 */
            cursor: pointer;
            /* 这里让图片在盒子里垂直+水平居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            /* 圆角属性 */
            border-radius: 20px;
            /* 盒子阴影 */
            box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
                  -18px -18px 30px rgba(255, 255, 255, 1);
            /* 过渡时间 ease-out是指先快速 后慢速 */
            transition: all 0.2s ease-out;



      }

      .contact-icon:hover {
            /* inset 是内部阴影 默认是外部阴影outset */
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
                  inset 18px 18px 30px rgba(0, 0, 0, 0.1),
                  inset -18px -18px 30px rgba(255, 255, 255, 1);
      }
      .contact-icon:hover img {
            /* inset 是内部阴影 默认是外部阴影outset */
            width: 29px;
      }
      .contact-img {
            width: 30px;
            transition: all 0.2s ease-out;
      }
      .bg-input{
            width: 80%;
      }
      /**上拉站点 */
      .sites-box{
            height: 40vh;
            position: absolute;
            bottom: 0;
            background-color: #E9F0F0;
            box-shadow: -3px 5px 20px var(--themeColor);
            .icon-box{
                  position: absolute;
                  top: -36px;
                  font-size: 1.5rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  .bottom-button{
                        cursor: pointer;
                        font-size: 1.5rem;
                        padding: 6px 20px;
                        background-color: #fff;
                        border-top-right-radius: 8px;
                        border-top-left-radius: 8px;
                        color: var(--fontColor);
                        background-color: var(--themeColor);
                  }
            }

            .className{
                  line-height: 120px;
                  text-align: center;
                  font-size: 16px;
                  font-weight: 700;
                  color: var(--themeColor);
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                  position: relative;

                  .showEditClass{
                        position: absolute;
                        top: 52px;
                        right: 0px;
                        display: none;
                        cursor: pointer;
                  }
            }      
      }
      .className:hover{
            .showEditClass{
                  display: inline;
            }
      }
      .add-site-input{
            width: 18vw;
      }


      .sites-begin{
            height: 40vh;
            transition: height 1s;
      }
      .sites-end{
            height: 0vh;
            transition: height 1s;
      }


</style>
